<template>
    <div class="notification-center absolute bg-white bg-opacity-80 dark:bg-gray-600 dark:bg-opacity-50 backdrop-filter backdrop-blur-lg duration-150 flex flex-col z-50" :class="{ 'show': isOpen }">
        <div class="text-right text-2xs p-3 text-gray-600 dark:text-gray-200">Manage notifications</div>
        <div class="flex justify-center items-center flex-grow">
            <span class="text-xs text-gray-600 dark:text-gray-200">No new notifications</span>
        </div>
        <div class="control-center grid grid-cols-4 gap-1 p-4">
            <button class="flex flex-col items-start gap-3 bg-white dark:bg-gray-700 dark:text-white px-1 pt-2 pb-1 border border-gray-200 dark:border-gray-600 duration-150" v-for="(item, index) in state.controls" :key="index" @click="item.active = !item.active; item.click()" :class="{ 'bg-blue-600 dark:bg-blue-500 text-white border-blue-600 dark:border-blue-500': item.active }">
                <img :src="item.icon" width="14" class="duration-150" :class="{ 'filter invert': item.active || darkMode }"/>
                <span>{{ item.label }}</span>
            </button>
        </div>
    </div>
</template>

<script setup>
import { computed, reactive } from '@vue/reactivity'
import { store } from '../store'

    const isOpen = computed(() => store.state.notificationCenter_active)
    const darkMode = computed(() => store.state.darkMode)
    const nightLight = computed(() => store.state.nightLight)
    const none = () => {}

    const toggleDarkMode = () => {
        store.commit('CHANGE_DARKMODE')
    }

    const toggleNightLight = () => {
        store.commit('CHANGE_NIGHTLIGHT')
    }

    const state = reactive({
        controls: [
                { label: 'Location', icon: '/src/assets/ui/location.png', active: false, click: none },
                { label: 'Battery saver', icon: '/src/assets/ui/battery-saver.png', active: true, click: none },
                { label: 'Night light', icon: '/src/assets/ui/night-light.png', active: false, click: toggleNightLight },
                { label: 'Bluetooth', icon: '/src/assets/ui/bluetooth.png', active: true, click: none },
                { label: 'Offline mode', icon: '/src/assets/ui/offline-mode.png', active: false, click: none },
                { label: 'Connect', icon: '/src/assets/ui/connect.png', active: false, click: none },
                { label: 'Project', icon: '/src/assets/ui/project.png', active: false, click: none },
                { label: 'Network', icon: '/src/assets/ui/network.png', active: false, click: none },
                { label: 'Sharing', icon: '/src/assets/ui/sharing.png', active: false, click: none },
                { label: 'Tablet mode', icon: '/src/assets/ui/tablet-mode.png', active: false, click: none },
                { label: 'Security', icon: '/src/assets/ui/security.png', active: false, click: none },
                { label: 'Dark mode', icon: '/src/assets/ui/focus-assist.png', active: darkMode.value, click: toggleDarkMode }
            ]
    })

</script>

<style lang="scss">

.notification-center {
    width: 320px;
    top: 0;
    right: -340px;
    bottom: 40px;
    box-shadow: -6px 0 6px #0001;
}

.notification-center.show {
    right: 0;
}

.control-center {
    button {
        font-size: 9px;
        border-radius: 4px;
    }
}

</style>